<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.css" th:href="@{/bootstrap-3.3.7/css/bootstrap.css}">
    <link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap-theme.css"th:href="@{/bootstrap-3.3.7/css/bootstrap-theme.css}">

    <script src="../jquery.js"  th:src="@{/js/jqery-3.3.1.js}"></script>
    <script src="../bootstrap-3.3.7-dist/js/bootstrap.js" th:src="@{/bootstrap-3.3.7/js/bootstrap.js}"></script>
    <!--    进度条-->
    <link rel="stylesheet" href="blue/pace-theme-corner-indicator.css">
    <script src="js/pace.js"></script>
    <style>
        body{
            background-image: url("images/背景.jpg");
        }
    </style>
</head>

<body >
    <div class="container">
        <div class="row clearfix">
            <div class="col-md-12 column">
                <ul class="nav nav-pills">
                    <li class="">
                         <a href="/"> <span class="badge pull-right">42</span>商城首页</a>
                    </li>
                    <li>
                         <a href="/user/cart"> <span class="badge pull-right">16</span>购物车</a>
                    </li>
                    <li>
                        <a href="/user/collect"> <span class="badge pull-right">16</span>收藏</a>
                   </li>
                </ul>
            </div>
        </div>
        <div class="row clearfix">
            <div class="col-md-12 column">
                <ul class="nav nav-tabs">
                    <li class="">
                         <a href="#">店铺</a>
                    </li>
                    <li>
                         <a href="#">商品详情</a>
                    </li>
                    <li class="active">
                         <a href="#">确认订单</a>
                    </li>
                    <li class="dropdown pull-right">
                         <a href="#" data-toggle="dropdown" class="dropdown-toggle">下拉<strong class="caret"></strong></a>
                        <ul class="dropdown-menu">
                            <li>
                                 <a href="#">操作</a>
                            </li>
                            <li>
                                 <a href="#">设置栏目</a>
                            </li>
                            <li>
                                 <a href="#">更多设置</a>
                            </li>
                            <li class="divider">
                            </li>
                            <li>
                                 <a href="#">分割线</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
        <div class="row clearfix">
            <div class="col-md-12 column">
                 <address> <strong>买家信息</strong><br />广东广州大学城<br /> 华南理工大学<br />
                     <abbr title="Phone" th:text="${session.user.username}"></abbr> <p>(123) 456-7890</p></address>
            </div>
        </div>
        <!--/*@thymesVar id="NumMap" type="java.util.HashMap"*/-->
        <!--/*@thymesVar id="MobilePhoneList" type="com.example.login.Pojo.mobileGoods"*/-->
        <div th:each="mobile:${MobilePhoneList}"><!--框住范围-->
           <div class="row clearfix">
            <div class="col-md-2 column">
                <img alt="140x140" id="img"th:src="@{'/Image/'+${mobile.goodImage}}" width="180px" />
            </div>
            <div class="col-md-6 column">
                <dl>
                    <dt>
                        商品名称: <strong th:text="${mobile.item_name}" id="item_name"></strong>
                    </dt>
                    <dt>
                        商店名：<strong th:text="${mobile.store_name}" id="store_name"></strong>
                    </dt>

                    <dt>
                        属性：
                    </dt>
                    <dd>
                        颜色：<strong th:text="${mobile.color}" id="color"></strong>
                    </dd>
                    <dd>
                        运存：<strong th:text="${mobile.RAM}" id="RAM"></strong>
                    </dd>
                    <dd>
                        内存：<strong th:text="${mobile.ROM}" id="ROM"></strong>
                    </dd>
                    <dd>
                        网络类型：<strong th:text="${mobile.network}" id="network"></strong>
                    </dd>
                    <dd>
                        其他
                    </dd>
                    <dt>
                        特色服务：<strong th:text="${mobile.combination}" id="combination"></strong>
                    </dt>
                </dl>
            </div>
            <div class="col-md-4 column">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">
                            折扣活动：
                        </h3>
                    </div>
                    <div class="panel-body">
                        原价：<strong th:text="${mobile.price}*${NumMap[mobile.id+' '+mobile.color+mobile.ROM+mobile.RAM+mobile.network]}" id="price"></strong>
                    </div>
                    <div class="panel-footer">
                        现价：
                    </div>
                </div>

                <div>购买数量：</div>
                <div class="row ">

                    <input class="btn-group" type="button" value="-" onclick="reductionOf(this)" />

                    <input style="width: 30px" class="btn-group" id="mobileTag" type="text" th:value="${NumMap[mobile.id+' '+mobile.color+mobile.ROM+mobile.RAM+mobile.network]}" onblur="checkNumber(this)" />

                    <input class="btn-group"  type="button" value="+" onclick="add(this)" />

                </div>
            </div>
           </div>
        </div>
        <!--/*@thymesVar id="PCList" type="com.example.login.Pojo.PCGoods"*/-->
        <div th:each="pc:${PCList}"><!--框住范围-->
            <div class="row clearfix">
                <div class="col-md-2 column">
                    <img alt="140x140" id="img"th:src="@{'/Image/'+${pc.goodImage}}" width="180px" />
                </div>
                <div class="col-md-6 column">
                    <dl>
                        <dt>
                            商品名称: <strong th:text="${pc.item_name}" id="item_name"></strong>
                        </dt>
                        <dt>
                            商店名：<strong th:text="${pc.store_name}" id="store_name"></strong>
                        </dt>
                        <dt>
                            属性：
                        </dt>
                        <dd>
                            颜色：<strong th:text="${pc.color}" id="color"></strong>
                        </dd>
                        <dd>
                            运存：<strong th:text="${pc.RAM}" id="RAM"></strong>
                        </dd>
                        <dd>
                            内存：<strong th:text="${pc.ROM}" id="ROM"></strong>
                        </dd>
                        <dd>
                            其他
                        </dd>
                        <dt>
                            特色服务：<strong th:text="${pc.combination}" id="PcCombination"></strong>
                        </dt>
                    </dl>
                </div>
                <div class="col-md-4 column">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h3 class="panel-title">
                                折扣活动：
                            </h3>
                        </div>
                        <div class="panel-body">
                            原价：<strong th:text="${pc.price}*${NumMap[pc.id+' '+pc.color+pc.ROM+pc.RAM]}" id="PcPrice"></strong>
                        </div>
                        <div class="panel-footer">
                            现价：
                        </div>
                    </div>


                    <div>购买数量：</div>
                    <div class="row ">

                        <input class="btn-group" type="button" value="-" onclick="reductionOf(this)" />

                        <input style="width: 30px" class="btn-group"  type="text" th:value="${NumMap[pc.id+' '+pc.color+pc.ROM+pc.RAM]}" onblur="checkNumber(this)" />

                        <input class="btn-group"  type="button" value="+" onclick="add(this)" />

                    </div>

                </div>
            </div>
        </div>
        <!--/*@thymesVar id="MP3List" type="com.example.login.Pojo.mp3Goods"*/-->
        <div th:each="mp3:${MP3List}"><!--框住范围-->
            <div class="row clearfix">
                <div class="col-md-2 column">
                    <img alt="140x140" id="img"th:src="@{'/Image/'+${mp3.goodImage}}" width="180px"/>
                </div>
                <div class="col-md-6 column">
                    <dl>
                        <dt>
                            商品名称: <strong th:text="${mp3.item_name}" id="item_name"></strong>
                        </dt>
                        <dt>
                            商店名：<strong th:text="${mp3.store_name}" id="store_name"></strong>
                        </dt>

                        <dt>
                            属性：
                        </dt>
                        <dd>
                            颜色：<strong th:text="${mp3.color}" id="color"></strong>
                        </dd>
                        <dd>
                            运存：<strong th:text="${mp3.ROM}" id="ROM"></strong>
                        </dd>
                        <dd>
                            其他
                        </dd>
                        <dt>
                            特色服务：<strong th:text="${mp3.combination}" id="combination"></strong>
                        </dt>

                    </dl>
                </div>
                <div class="col-md-4 column">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h3 class="panel-title">
                                折扣活动：
                            </h3>
                        </div>
                        <div class="panel-body">
                            原价：<strong th:text="${mp3.price}*${NumMap[mp3.id+' '+mp3.color+mp3.ROM]}" id="price"></strong>
                        </div>
                        <div class="panel-footer">
                            现价：
                        </div>
                    </div>


                    <div>购买数量：</div>
                    <div class="row ">

                        <input class="btn-group" type="button" value="-" onclick="reductionOf(this)" />

                        <input style="width: 30px" class="btn-group"  type="text" th:value="${NumMap[mp3.id+' '+mp3.color+mp3.ROM]}" onblur="checkNumber(this)" />

                        <input class="btn-group"  type="button" value="+" onclick="add(this)" />

                    </div>

                </div>
            </div>
        </div>

        <br>
        <br>
        <div class="row clearfix">
            <div class="col-md-4 column">
            </div>
            <div class="col-md-4 column">
                
            </div>
            <div class="col-md-4 column">
                <p >
                        总计金额:<a style="color:#e0a800" id="total" text=""></a>
                </p>

                <br>
                <a href="/user/pay"><button type="button"  class="btn btn-default">确认支付</button></a>
            </div>
        </div>
    </div>

    <script>
        //减数量
        function reductionOf(obj) {
            //减前判断
            if ($(obj).next().val() === ''||parseInt($(obj).next().val()) === 0) {
                $(obj).next().val(1);
            }
            $(obj).next().val(parseInt($(obj).next().val()) - 1);//数值减
            $(obj).next().val($(obj).next().val());//赋值给框
        };
        //加数量
        function add(obj) {
            //加前判断
            if ($(obj).prev().val() === '') {
                $(obj).prev().val(1);
            }
            $(obj).prev().val(parseInt($(obj).prev().val()) + 1);//数值加
            $(obj).prev().val($(obj).prev().val());//赋值给框
        };
        //校验数字格式（只能输入正整数）
        function checkNumber(obj) {
            var reg = /^[1-9]\d*$/;
            if(!reg.test($(obj).val()) || $(obj).val()===''){
                $(obj).val(1);
            }
        }
    </script>
    <script th:inline="javascript">
        const mobiles = [[${MobilePhoneList}]];
        const pcs=[[${PCList}]];
        const mp3s=[[${MP3List}]];
        const map=[[${NumMap}]];
        var totalPrice=0;
        for(var i =0;i<mobiles.length;i++)
        {
            totalPrice+=mobiles[i].price*map[mobiles[i].id+' '+mobiles[i].sku_code];
        }
        for(var i=0;i<pcs.length;i++)
        {
            totalPrice+=pcs[i].price*map[pcs[i].id+' '+pcs[i].sku_code];
        }
        for(var i=0;i<mp3s.length;i++)
        {
            totalPrice+=mp3s[i].price*map[mp3s[i].id+' '+mp3s[i].sku_code];
        }
        document.getElementById("total").textContent=totalPrice;
        // const NumMap=[[${NumMap}]];
        var sku_code =document.getElementById("sku_code").options;
        function isArray(myArray) {
            return myArray.constructor.toString().indexOf("Array") > -1;
        }
        function chg(index) {
            var i=index;
            document.getElementById('img').src ="/Image/"+mobiles[i].id+mobiles[i].sku_code+"/"+mobiles[i].image;
            document.getElementById('price').textContent=mobiles[i].price;
            document.getElementById('combination').textContent=mobiles[i].combination;
            document.getElementById('fright').textContent=mobiles[i].fright;
            document.getElementById('fright').textContent=mobiles[i].fright;
        }
    </script>
    
</body>
</html>